<template>
  <l-layout :top="180">
    <template #top>
      <el-form class="l-form-config" label-width="88px" label-position="left" size="mini">
        <el-form-item label="节点标识">
          <el-input v-model="node.id" readonly></el-input>
        </el-form-item>
        <div style="padding: 0 16px">
          <el-alert
            title="包容网关说明"
            type="info"
            description="包容网关会等待所有分支汇入才往下执行，出口分支能执行多条（条件为true）"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
      </el-form>
    </template>
    <l-layout :top="40">
      <template #top v-if="!disabled">
        <div style="padding-left: 8px; float: left">
          <el-button-group>
            <el-button size="mini" icon="el-icon-plus" @click="handleFormulaClick">{{ $t("公式") }}</el-button>
            <el-button size="mini" icon="el-icon-plus" @click="handleSQlClick">{{ $t("sql语句") }}</el-button>
          </el-button-group>
        </div>
        <div style="padding-right: 8px; float: right">
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleClearClick">{{
            $t("清空")
          }}</el-button>
        </div>
      </template>
      <l-table :columns="columns" :dataSource="node.conditions">
        <template v-slot:type="scope">
          {{ typeFormat(scope.row.type) }}
        </template>
        <l-table-btns v-if="!disabled" :btns="tableBtns" @click="handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-layout>

    <l-dialog
      :title="$t('添加公式条件')"
      :visible.sync="formulaVisible"
      :height="480"
      @ok="handleFormulaOk"
      @closed="handleFormulaClosed"
      @opened="handleFormulaOpened"
    >
      <condition-formula ref="conditionFormula"></condition-formula>
    </l-dialog>

    <l-dialog
      :title="$t('添加sql条件')"
      :visible.sync="sqlVisible"
      :height="480"
      @ok="handleSqlOk"
      @closed="handleSqlClosed"
      @opened="handleSqlOpened"
    >
      <condition-sql ref="conditionSql"></condition-sql>
    </l-dialog>
  </l-layout>
</template>

<script>
import conditionFormula from "./conditionFormula";
import conditionSql from "./conditionSql";

export default {
  name: "gateway-inclusive-option",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    conditionFormula,
    conditionSql,
  },
  data() {
    return {
      tableBtns: [
        { prop: "Edit", label: "编辑" },
        { prop: "Delete", label: "删除" },
      ],
      columns: [
        { label: "类型", prop: "type", width: "80", align: "center" },
        { label: "名称", prop: "name", minWidth: "100" },
      ],
      tableData: [],

      formulaVisible: false,
      sqlVisible: false,

      editRow: null,
      isEdit: false,
      rowIndex: 0,
    };
  },
  computed: {
    node() {
      return this.wfdesign.currentWfNode;
    },
  },
  inject: ["wfdesign"],
  methods: {
    typeFormat(type) {
      switch (type) {
        case "1":
          return "表达式";
        case "2":
          return "sql语句";
      }
    },
    handleTableBtnClick(btn) {
      switch (btn.type) {
        case "Edit":
          this.isEdit = true;
          this.editRow = btn.row;
          this.rowIndex = btn.rowIndex;
          if (this.editRow.type == "1") {
            this.formulaVisible = true;
          } else {
            this.sqlVisible = true;
          }
          break;
        case "Delete":
          this.node.conditions.splice(btn.rowIndex, 1);
          break;
      }
      //console.log(btn);
      //this.tableData.splice(btn.rowIndex,1);
    },
    handleFormulaClick() {
      this.isEdit = false;
      this.formulaVisible = true;
    },
    handleSQlClick() {
      this.isEdit = false;
      this.sqlVisible = true;
    },
    handleClearClick() {
      this.node.conditions = [];
    },
    handleFormulaOk() {
      this.$refs.conditionFormula.validateForm(() => {
        let formData = this.$refs.conditionFormula.getForm();
        formData.type = "1";

        if (this.isEdit) {
          this.node.conditions[this.rowIndex] = formData;
        } else {
          formData.code = this.$uuid();
          this.node.conditions.push(formData);
        }

        this.formulaVisible = false;
      });
    },
    handleFormulaOpened() {
      if (this.isEdit) {
        this.$refs.conditionFormula.setForm(this.editRow);
      }
    },
    handleFormulaClosed() {
      this.$refs.conditionFormula.resetForm();
    },
    handleSqlOk() {
      this.$refs.conditionSql.validateForm(() => {
        let formData = this.$refs.conditionSql.getForm();
        formData.type = "2";

        if (this.isEdit) {
          this.node.conditions[this.rowIndex] = formData;
        } else {
          formData.code = this.$uuid();
          this.node.conditions.push(formData);
        }

        this.sqlVisible = false;
      });
    },
    handleSqlOpened() {
      if (this.isEdit) {
        this.$refs.conditionSql.setForm(this.editRow);
      }
    },
    handleSqlClosed() {
      this.$refs.conditionSql.resetForm();
    },
  },
};
</script>

<style></style>
